<script lang="ts" setup>
import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import CustomPage from '@/components/customPage.vue'
import DemoContainer from '@/components/container.vue'

import { zReadMoreInstance } from 'zgg-ui/components/z-read-more/index'

import { useDemoH5Page, useWxShare } from '@/hooks/index'
import { ref } from 'vue'

// 微信分享
onShareAppMessage(() => ({}))
onShareTimeline(() => ({}))

useWxShare({
  path: '/components-pages/z-read-more/index',
})
const { isDemoH5Page } = useDemoH5Page()
const content = `项脊轩，旧南阁子也。室仅方丈，可容一人居。
百年老屋，尘泥渗漉，雨泽下注，每移案，顾视无可置者。
又北向，不能得日，日过午已昏。余稍为修葺，使不上漏；
前辟四窗，垣墙周庭，以当南日；日影反照，室始洞然。
又杂植兰桂竹木于庭，旧时栏楯，亦遂增胜。
借书满架，偃仰啸歌，冥然兀坐，万籁有声；
而庭阶寂寂，小鸟时来啄食，人至不去。
三五之夜，明月半墙，桂影斑驳，风移影动，珊珊可爱。
然余居于此，多可喜，亦多可悲。
先是，庭中通南北为一，迨诸父异爨，内外多置小门墙，往往而是。
东犬西吠，客逾庖而宴，鸡栖于厅。庭中始为篱，已为墙，凡再变矣。家有老妪，尝居于此。
妪，先大母婢也，乳二世，先妣抚之甚厚。室西连于中闺，先妣尝一至。妪每谓余曰：“某所，而母立于兹。”
妪又曰：“汝姊在吾怀，呱呱而泣；娘以指叩门扉曰：‘儿寒乎？欲食乎？’吾从板外相为应答。”
语未毕，余泣，妪亦泣。余自束发读书轩中，一日，大母过余曰：“吾儿，久不见若影，何竟日默默在此，
大类女郎也！”比去，以手阖门，自语曰：“吾家读书久不效，儿之成，则可待乎？”
顷之，持一象笏至，曰：“此吾祖太常公宣德间执此以朝，他日汝当用之。”
瞻顾遗迹，如在昨日，令人长号不自禁。轩东故尝为厨，人往，从轩前过。
余扃牖而居，久之，能以足音辨人。轩凡四遭火，得不焚，殆有神护者。
项脊生曰：蜀清守丹穴，利甲天下，其后秦皇帝筑女怀清台。
刘玄德与曹操争天下，诸葛孔明起陇中，方二人之昧昧于一隅也，世何足以知之？
余区区处败屋中，方扬眉瞬目，谓有奇景；人知之者，其谓与埳井之蛙何异？
余既为此志，后五年，吾妻来归。时至轩中，从余问古事，或凭几学书。
吾妻归宁，述诸小妹语曰：“闻姊家有阁子，且何谓阁子也？”其后六年，吾妻死，室坏不修。
其后二年，余久卧病无聊，乃使人复葺南阁子，其制稍异于前。然自后余多在外，不常居。
庭有枇杷树，吾妻死之年所手植也。今已亭亭如盖矣。`

const lockContent = `余既为此志，后五年，吾妻来归。时至轩中，从余问古事，或凭几学书。
吾妻归宁，述诸小妹语曰：“闻姊家有阁子，且何谓阁子也？”其后六年，吾妻死，室坏不修。
其后二年，余久卧病无聊，乃使人复葺南阁子，其制稍异于前。然自后余多在外，不常居。
庭有枇杷树，吾妻死之年所手植也。今已亭亭如盖矣。
`

const readMoreRef = ref<zReadMoreInstance>()
const unLockFlag = ref<boolean>(false)
let unLockCount = 0

// 展开前拦截事件
const beforeExpand = () => {
  if (unLockFlag.value) {
    return true
  }
  return new Promise<boolean>((resolve, reject) => {
    uni.showLoading({
      title: '请求中...',
      mask: true,
    })
    setTimeout(() => {
      if (unLockCount === 0) {
        uni.showToast({
          title: '解说失败，请重试',
          icon: 'none',
        })
        unLockCount++
        reject(false)
        return
      }
      uni.hideLoading()
      unLockFlag.value = true
      readMoreRef.value?.resetContentHeight()
      resolve(true)
    }, 2000)
  })
}
</script>

<template>
  <CustomPage title="阅读更多" :is-h5-demo-page="isDemoH5Page">
    <DemoContainer title="基础使用">
      <div class="read-more-container">
        <div class="read-more-item">
          <z-read-more>
            <rich-text :nodes="content" />
          </z-read-more>
        </div>
      </div>
    </DemoContainer>
    <DemoContainer title="默认展开">
      <div class="read-more-container">
        <div class="read-more-item">
          <z-read-more expand>
            <rich-text :nodes="content" />
          </z-read-more>
        </div>
      </div>
    </DemoContainer>
    <DemoContainer title="不显示收起按钮">
      <div class="read-more-container">
        <div class="read-more-item">
          <z-read-more :show-fold="false">
            <rich-text :nodes="content" />
          </z-read-more>
        </div>
      </div>
    </DemoContainer>
    <DemoContainer title="设置显示内容的高度">
      <div class="read-more-container">
        <div class="read-more-item">
          <z-read-more :height="300">
            <rich-text :nodes="content" />
          </z-read-more>
        </div>
      </div>
    </DemoContainer>
    <DemoContainer title="自定义文案">
      <div class="read-more-container">
        <div class="read-more-item">
          <z-read-more
            expand-text="付费查看"
            expand-icon="lock"
            fold-text="收起"
            fold-icon="up-arrow"
          >
            <rich-text :nodes="content" />
          </z-read-more>
        </div>
      </div>
    </DemoContainer>
    <DemoContainer title="修改颜色">
      <div class="read-more-container">
        <div class="read-more-item">
          <z-read-more tip-color="cgray3">
            <rich-text :nodes="content" />
          </z-read-more>
        </div>
      </div>
    </DemoContainer>
    <DemoContainer title="添加事件 - 点击两次解锁">
      <div class="read-more-container">
        <div class="read-more-item">
          <z-read-more ref="readMoreRef" :before-expand="beforeExpand">
            <rich-text v-if="unLockFlag" :nodes="content" />
            <rich-text v-else :nodes="lockContent" />
          </z-read-more>
        </div>
      </div>
    </DemoContainer>
  </CustomPage>
</template>

<style lang="less" scoped>
.read-more-container {
  position: relative;
  width: 100%;

  .read-more-item {
    position: relative;
    width: 100%;

    & + .read-more-item {
      margin-top: 30rpx;
    }
  }
}
</style>
